<template>
  <div class="box5">
    <div class="login">
      <img
        class="lt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0框架/u65.png"
        alt=""
      />
      <h3>艾斯的Axure峡谷</h3>
    </div>
    <div class="ctr">
      <i
        class="el-icon-chat-dot-round"
        style="color: white; font-size: 20px; margin-top: 5px"
      ></i>
      <p class="middleleft">|</p>
      <p class="listva">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
    </div>
    <div class="nav-left">
      <div class="source boxsize">
        <img
          class="location"
          src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0框架/u68.png"
          alt=""
        />
        <p>源文件</p>
      </div>
      <div class="backlog boxsize">
        <i
          class="el-icon-delete"
          style="margin-right: 3px; color: #fff; font-size: 18px"
        ></i>
        <p>代办</p>
      </div>
      <div class="information boxsize">
        <i
          class="el-icon-bell"
          style="margin-right: 3px; color: #fff; font-size: 18px"
        ></i>
        <p>消息</p>
      </div>
      <div class="photo boxsize" style="display: flex; align-items: center">
        <div>
          <img
            style="margin-right: 5px"
            src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0框架/u46.png"
            alt=""
          />
        </div>
        <p>艾斯</p>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-caret-bottom" style="color: #fff; margin-left: 15px"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box5 {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 10px;
  width: 100%;
  height: 50px;
  background: rgba(67, 141, 238, 1);
  .login {
    display: flex;
    align-items: center;
    margin-right: 30px;
    .lt {
      color: white;
      margin-right: 10px;
    }
    h3 {
      color: #fff;
    }
  }
  .ctr {
    display: flex;
    align-items: center;
    .middleleft {
      font-size: 20px;
      margin-left: 15px;
      margin-right: 15px;
      color: #fff;
    }
    .listva {
      color: #fff;
      font-size: 14px;
    }
  }
  .nav-left {
    position: absolute;
    top: 0;
    right: 80px;
    display: flex;
    p {
      display: inline-block;
      font-size: 14px;
      color: #fff;
    }
    .location {
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 3px;
      margin-bottom: 3px;
    }
  }
  .boxsize {
    margin-left: 15px;
  }
}
</style>